<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="box">
			<view class="pic-box">
				<image :src="imageUrl+details.pic" mode=""></image>
			</view>
			<view class="title"> 评价打分 </view>
			<view class="line acea-row row-middle">
				<text>服务态度</text>
				<u-rate count="5" v-model="details.service_score" activeColor="#FFA731" inactiveColor="#DDDDDD"
					inactiveIcon="star-fill" size="48rpx"> </u-rate>
			</view>
			<view class="line acea-row row-middle">
				<text>如约守时</text>
				<u-rate count="5" v-model="details.punctual_score" activeColor="#FFA731" inactiveColor="#DDDDDD"
					inactiveIcon="star-fill" size="48rpx"> </u-rate>
			</view>
			<view class="line acea-row row-middle">
				<text>专业能力</text>
				<u-rate count="5" v-model="details.major_score" activeColor="#FFA731" inactiveColor="#DDDDDD"
					inactiveIcon="star-fill" size="48rpx"> </u-rate>
			</view>
			<view class="line acea-row row-middle">
				<text>办事效率</text>
				<u-rate count="5" v-model="details.efficiency_score" activeColor="#FFA731" inactiveColor="#DDDDDD"
					inactiveIcon="star-fill" size="48rpx"> </u-rate>
			</view>
			<textarea class="message" v-model="details.content" value="" placeholder="评价您的服务体验，帮助其他患者更快找到合适的服务人员。"
				placeholder-style="color:#C5C6C6" />
		</view>
		<view class="btn-box">
			<view class="btn" @click="evaluateOrder"> 提交</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '评价',
					'color': true,
					'class': 'on'
				},
				imageUrl: this.imageUrl,
				details: {
					pic: '/static/images/doctor.png',
					service_score: '',
					punctual_score: '',
					major_score: '',
					efficiency_score: '',
					content: '',
				},
			};
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id;
			this.details.pic = option.pic;
			console.log(option)
		},

		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async evaluateOrder() {
				const res = await this.$myRequest({
					url: '/api/order/evaluateOrder', //把接口传过去
					data: {
						openid: uni.getStorageSync('openid'),
						order_id: this.id,
						service_score: this.details.service_score,
						punctual_score: this.details.punctual_score,
						major_score: this.details.major_score,
						efficiency_score: this.details.efficiency_score,
						content: this.details.content
					}
				})
				if (res.data.status == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '评价完成',
						complete() {
							uni.navigateBack()
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 100rpx 30rpx 30rpx 30rpx;
	}

	.box {
		background-color: #fff;
		border-radius: 18rpx;
		padding: 30rpx 60rpx;
		position: relative;
		padding-top: 100rpx;
	}

	.pic-box {
		width: 126rpx;
		height: 126rpx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, -50%);
		border: 2px solid #fff;
	}

	.pic-box image {
		width: 100%;
		height: 100%;
	}

	.title {
		font-size: 28rpx;
		color: #000;
		font-weight: 700;
	}

	.line {
		padding: 20rpx 0;
		color: #666666;
		font-size: 26rpx;
	}

	.line text {
		width: 160rpx;
	}

	.message {
		width: 100%;
		background: #F6F7F8;
		border-radius: 12rpx;
		padding: 30rpx;
		font-size: 26rpx;
		margin-top: 30rpx;
		height: 260rpx;
	}

	.btn-box {
		padding-top: 60rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
